<template>
	<el-table
			:data="tableData"
			border
			style="width: 100%">
		<el-table-column
				fixed
				prop="id"
				label="水果id"
				width="160">
		</el-table-column>
		<el-table-column
				prop="name"
				label="水果名称"
				width="120">
		</el-table-column>
		<el-table-column
				prop="sale"
				label="水果销量"
				width="160">
		</el-table-column>
		<el-table-column
				prop="icon"
				label="图片"
				width="160">
			
			<template slot-scope="scope">
				<img :src="scope.row.icon" style="height: 70px"/>
			</template>
		</el-table-column>
		
		<el-table-column
				fixed="right"
				label="操作"
				width="160">
			<template slot-scope="scope">
				<el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
				<el-button @click="fruitEdit(scope.row)" type="text" size="small">修改</el-button>
				<el-button @click="fruitAdd(scope.row)" type="text" size="small">添加</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import axios from 'axios'
export default {
	name: 'Table',
	methods: {
		fruitDelete(row){
			this.$confirm('是否确定删除'+row.name+'?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.delete('http://localhost:8181/fruit/deleteFruit/'+row.id).then(res => {
					if (res.data){
						this.$alert(row.name+'删除成功!','删除数据', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		
	//	编辑水果
		fruitEdit(row){
			this.$router.push('/edit?id='+row.id)
		},
		
		//添加水果
		fruitAdd(){
			this.$router.push('/add')
		},
	},
	
	
	
	created() {
		axios.get('http://localhost:8181/fruit/list').then(res => {
			this.tableData = res.data
		})
	},
	
	data() {
		return {
			tableData: null
		}
	}
}
</script>
